<template>
  <div>
    <a-button type='primary' style='margin-bottom: 5px' @click='$refs.fieldForm.open()'>添加管控商品</a-button>
    <a-form-model :model='form' ref='formModal'>
      <a-form-model-item prop='dataScopeIds'>
        <a-transfer
          v-model='form.dataScopeIds'
          :listStyle="{width: '45%',height: '500px'}"
          :dataSource='dataList'
          :titles="['可管控商品', '已管控商品']"
          :show-search="true"
          :filter-option="(inputValue, item) => item.title.indexOf(inputValue) !== -1"
          :target-keys='form.dataScopeIds'
          @change='handleTransferChange'>
          <template slot='children' slot-scope='{props: { direction, filteredItems, selectedKeys },on: { itemSelectAll, itemSelect }}'>
            <a-table
              :row-selection='getRowSelection({ selectedKeys, itemSelectAll, itemSelect })'
              :columns="direction === 'left' ? leftColumns : rightColumns"
              :data-source='filteredItems'
              size='small'
              :pagination='false'
              :scroll='{ y:350 }'
              :custom-row='
                ({ key }) => ({
                  on: {
                  click: () => {
                     itemSelect(key, !selectedKeys.includes(key));
                  },
                },
                })'
            >
            <span slot='scopeCode' slot-scope='text, record, index'>
               <a-tag color='#FF0000' v-if='text=="ZS"'>招商</a-tag>
               <a-tag color='#00FF00' v-if='text=="ZY"'>自营</a-tag>
            </span>  
            </a-table>
          </template>
        </a-transfer>
      </a-form-model-item>
    </a-form-model>
    <data-scope-form ref='fieldForm' @success='getAuthList' title='商品' scope-type='drug'></data-scope-form>
  </div>
</template>

<script>
import FieldForm from "./components/field_form"
import DataScopeForm from "./components/datascope_form"
import difference from "lodash/difference"

export default {
  name: "UserDataScope",
  components: { DataScopeForm, FieldForm },
  data() {
    const leftTableColumns = [
      {
        dataIndex: "scopeName",
        title: "商品名称"
      },
      {
        dataIndex: "scopeCode",
        title: "商品编码",
        scopedSlots: { customRender: "scopeCode" },
        filters: [
          {
            text: '招商',
            value: 'ZS',
          },
          {
            text: '自营',
            value: 'ZY',
          },
        ],
        onFilter: (value, record) => record.scopeCode.indexOf(value) === 0,
        filterMultiple: false,
      }
    ]
    const rightTableColumns = [
      {
        dataIndex: "scopeName",
        title: "商品名称"
      }
    ]
    return {
      dataList: [],
      leftColumns: leftTableColumns,
      rightColumns: rightTableColumns,
      form: {
        userId: "",
        dataScopeIds: []
      }
    }
  },
  methods: {
    triggerDisable(disabled) {
      this.disabled = disabled
    },

    triggerShowSearch(showSearch) {
      this.showSearch = showSearch
    },
    getRowSelection({ disabled, selectedKeys, itemSelectAll, itemSelect }) {
      return {

        onSelectAll(selected, selectedRows) {
          const treeSelectedKeys = selectedRows.map(({ key }) => key)
          const diffKeys = selected ? difference(treeSelectedKeys, selectedKeys) : difference(selectedKeys, treeSelectedKeys)
          itemSelectAll(diffKeys, selected)
        },
        onSelect({ key }, selected) {
          itemSelect(key, selected)
        },
        selectedRowKeys: selectedKeys
      }
    },
    setData(data) {
      if (data && data.userId) {
        this.form.userId = data.userId
        this.getAuthList()
      }
    },
    handleSubmit() {
      this.$refs["formModal"].validate(valid => {
        if (valid) {
          this.http.post(this, {
            url: this.api.managerUser.setAuthDataScope,
            data: {
              userId: this.form.userId,
              scopeType: "drug",
              dataScopeIds: this.form.dataScopeIds.join(",")
            },
            success: function(me) {
            }
          })
        } else {
          return false
        }
      })
    },
    getAuthList() {
      this.http.get(this, {
        url: this.api.managerUser.getAuthDataScopeList,
        data: {
          userId: this.form.userId,
          scopeType: "drug"
        },
        success: (me, data) => {
          data.dataList.map(item => {
            item.key = item.dataScopeId
            item.title = item.scopeName
          })
          me.dataList = data.dataList
          me.form.dataScopeIds = data.dataScopeIds
        }
      })
    },
    handleTransferChange(targetKeys, direction, moveKeys) {
      this.form.dataScopeIds = targetKeys
    }
  }
}
</script>
